<template>
	<div class="banners">
		<swiper class="swiper" :options="swiperOption">
			<swiper-slide v-for="(item,index) of banners" :key="index">
				<router-link :to="item.url">
					<img :src="item.img" />
				</router-link>
			</swiper-slide>
			<div class="swiper-pagination" slot="pagination"></div>
		</swiper>
	</div>
	
	
</template>

<script>
	import { Swiper , SwiperSlide } from 'vue-awesome-swiper'
	import 'swiper/css/swiper.css'
	export default {
		name: 'banner',
		components: {
			Swiper,
			SwiperSlide
		},
		props:{
			banners:Array
		},
		data: function() {
			return {
				swiperOption: {
					autoplay:true,
					loop:true,
					pagination: {
						el: '.swiper-pagination'
					}
				},
			}
		},
		
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper
			}
		},

	}
</script>

<style scoped="scoped">
	.banners{
		width: 100%;
	}
	.banners img{
		width: 100%;
		border-radius: 5px;
	}
	.banners .swiper-pagination{
		text-align: right;
	}
	.swiper-pagination-bullet-active{
		background-color: #fff !important;
	}
	.swiper-pagination-bullet{
		background: rgba(255,255,255,.5);
	}
</style>
